/** 车辆保险管理 */

import React, {useEffect, useState} from 'react'
import {Button, Space, message, Select} from 'antd'
import type {ColumnsType} from 'antd/es/table'
import {ArrowDownOutlined} from '@ant-design/icons'
import moment from 'moment'
import styles from '../../index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'
import {histryList} from '@/service/carMessage/insurance'
import {downloadDocumentUrl} from '@/service/common/download'

interface DataType {
	id: string
	vin: string
	insuranceCompanyName: string
	carPlateNo: string
	buyType: string
	insured: string
	buyInsuranceNo: string
	totalFee: number
	insuranceStartTime: string
	insuranceOrderTime: string
	ncdCoefficient: string
}

const formItemLayout = {
	labelCol: {flex: '80px'},
	wrapperCol: {flex: '1'},
}

const purchaseRecord = (props: {id: string; dictData: any}) => {
	const {id, dictData} = props
	const [dataSourse, setDataSourse] = useState<any[]>([])
	const [insuranceCompany, setInsuranceCompany] = useState<any>([])
	const [loading, setLoading] = useState(false)
	const [total, setTotal] = useState()
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})

	// 获取车辆保险列表
	const getData = (data?: any) => {
		setLoading(true)
		histryList({...params, insuranceId: id, ...data})
			.then((res: any) => {
				if (res?.success) {
					setDataSourse(res?.data?.records)
					setTotal(res?.data?.total)
					setLoading(false)
				}
			})
			.catch((err) => {
				setDataSourse([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		if (id) {
			getData()
		}
	}, [id, params])

	const columns: ColumnsType<DataType> = [
		{
			title: 'VIN',
			dataIndex: 'vin',
			align: 'center',
			width: 150,
		},
		{
			title: '车牌号',
			dataIndex: 'carPlateNo',
			align: 'center',
			width: 100,
		},
		{
			title: '保险公司',
			dataIndex: 'insuranceCompanyName',
			align: 'center',
			width: 100,
		},
		{
			title: '购买类型',
			dataIndex: 'buyType',
			align: 'center',
			width: 100,
			render: (text) => (
				<Select
					value={text.toString() || '-'}
					disabled
					fieldNames={{value: 'dictKey', label: 'dictValue'}}
					options={dictData?.buy_Type}
				/>
			),
		},
		{
			title: '被保人',
			dataIndex: 'insured',
			align: 'center',
			width: 100,
		},
		{
			title: '保单号',
			dataIndex: 'buyInsuranceNo',
			align: 'center',
			width: 150,
		},
		{
			title: '保费',
			dataIndex: 'totalFee',
			align: 'center',
			width: 100,
		},
		{
			title: '保险日期',
			dataIndex: 'insuranceStartTime',
			align: 'center',
			width: 190,
			render: (text: any, record: any) => (
				<>
					{moment(record?.insuranceStartTime).format('YYYY-MM-DD')} -
					{moment(record?.insuranceEndTime).format('YYYY-MM-DD')}
				</>
			),
		},
		{
			title: '出单日期',
			dataIndex: 'insuranceOrderTime',
			align: 'center',
			width: 190,
		},
		{
			title: '出险NCD系数',
			dataIndex: 'ncdCoefficient',
			align: 'center',
			width: 150,
		},
	]
	const formItems: any[] = [
		{
			type: 'group',
			key: 'group1',
			groupItems: [
				{
					type: 'select',
					label: '购买类型',
					name: 'buyType',
					key: 'buyType',
					keys: 'dictKey',
					title: 'dictValue',
					allowClear: false,
					onChange: (value: string) => {
						if (value === '1') {
							setInsuranceCompany(
								dictData?.commercial_company_code,
							)
						} else if (value === '2') {
							setInsuranceCompany(dictData?.carrier_company_code)
						} else if (value === '3') {
							setInsuranceCompany(
								dictData?.compulsory_company_code,
							)
						}
					},
					items: dictData?.buy_Type,
				},
				{
					type: 'input',
					label: '保单号',
					name: 'buyInsuranceNo',
					key: 'buyInsuranceNo',
				},
				{
					type: 'select',
					label: '保险公司',
					name: 'insuranceCompanyCode',
					key: 'insuranceCompanyCode',
					keys: 'dictKey',
					title: 'dictValue',
					items: insuranceCompany,
				},
			],
		},
		{
			type: 'group',
			key: 'group2',
			groupItems: [
				{
					type: 'input',
					label: '车牌号',
					name: 'carPlateNo',
					key: 'carPlateNo',
				},
				{},
				{},
			],
		},
	]
	const onFinish = (values: any) => {
		getData(values)
	}

	const onReset = () => {
		getData()
	}

	return (
		<div className={styles.insurance}>
			<div className={styles.content}>
				<div className={styles.search}>
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formItems}
						formLayout={formItemLayout}
					/>
				</div>
				<div className={styles.btnlist}>
					<Space size={12}>
						<Button
							icon={<ArrowDownOutlined />}
							className={styles.import}
							ghost
							size="small"
							onClick={() => {
								downloadDocumentUrl({
									resourceId: '123',
									queryDesc:
										'保险购买记录导出,resourceId:123',
									queryParam: {},
								})
							}}>
							导出
						</Button>
					</Space>
				</div>
				<CustomTable
					params={params}
					columns={columns}
					total={total}
					pagination
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					loading={loading}
					dataSource={dataSourse}
				/>
			</div>
		</div>
	)
}
export default purchaseRecord
